import React, { useEffect, useState } from 'react';
import IntroduceRow from './IntroduceRow';
import {} from '@ant-design/charts';
import { Line, Funnel } from '@ant-design/plots';
import { taskChartsData } from '../service';
import { Spin, Divider, Space } from 'antd';
import type { DataItem as SmsClickLineItem } from '@antv/g2plot/esm/interface/config';
import type { TaskChartsData } from '../data';

type TaskDrawDetailProps = {
  taskId: number;
  refresh?: number;
};

const TaskDrawDetail: React.FC<TaskDrawDetailProps> = ({ taskId, refresh }) => {
  // const [smsClickLineData, setSmsClickLineData] = useState<SmsClickLineItem[]>([]);
  const [taskChartsDataItem, setTaskChartsDataItem] = useState<TaskChartsData>({
    click_charts: {
      lines: [],
    },
    visit_data: [],
  });
  const [loading, setLoading] = useState<boolean>(false);
  useEffect(() => {
    const getTaskDetailCharts = async () => {
      try {
        setLoading(true);
        const { data } = await taskChartsData(taskId);
        // setSmsClickLineData(data.click_charts.lines);
        // setVisitLineData(data.visit_data);
        setTaskChartsDataItem(data);
      } finally {
        setLoading(false);
      }
    };
    getTaskDetailCharts();
  }, [taskId, refresh]);

  const smsClickConfig = {
    data: taskChartsDataItem?.click_charts.lines,
    xField: 'key',
    yField: 'value',
    height: 300,
    xAxis: {
      tickCount: 5,
    },
    point: {
      size: 5,
      shape: 'diamond',
    },
    meta: {
      // year: {
      //   type: 'time',
      // },
      value: {
        alias: '次数',
      },
    },
  };

  const data3 = [
    {
      stage: '点击链接',
      number: taskChartsDataItem.click_charts?.total,
    },
    {
      stage: '完成投保',
      number: taskChartsDataItem.insurance_policy_charts?.total,
    },
    {
      stage: '打开小程序',
      number: taskChartsDataItem.mp_charts?.total,
    },
    {
      stage: '加入企微',
      number: taskChartsDataItem.wecom_charts?.total,
    },
  ];
  const config3 = {
    data: data3,
    xField: 'stage',
    yField: 'number',
    isTransposed: true,
    minSize: 0.1,
    shape: 'pyramid',
  };

  return (
    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
      <h2>数据概览</h2>
      <IntroduceRow loading={loading} visitData={taskChartsDataItem} />
      <Divider />
      <h2>短信链接点击数据</h2>
      <Spin spinning={loading} tip="加载中">
        <Line {...smsClickConfig} />
      </Spin>
      <Divider />
      {/*<h2>转化情况</h2>*/}
      {/*<Spin spinning={loading} tip="加载中">*/}
      {/*  <Funnel {...config3} />*/}
      {/*</Spin>*/}
    </Space>
  );
};

export default TaskDrawDetail;
